<html>
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <link href="./joint.min.css" rel="stylesheet">
    <link href="./element.css" rel="stylesheet">
    <style lang="scss">
        * {
            margin: 0;
            padding: 0;
        }

        #browse {
            width: 100%;
            height: calc(100vh);
            overflow: scroll;
            margin: 0 auto;
            white-space: nowrap;
        }

        .el-dialog__body {
            padding: 0;
        }

        .el-dialog__header {
            padding: 0 0 0 0;
        }

        .el-dialog__headerbtn {
            z-index: 10;
        }

        .textWrap {
            padding: 20px;
            text-indent: 32px;
        }

        .joint-paper {
            margin: 0 auto;
            overflow: auto;
        }

        .zoom {
            position: fixed;
            right: 10px;
            bottom: 10px;
            font-size: 20px;
        }

        .zoom div {
            background: rgba(216, 216, 216, .4);
            padding: 15px;
            text-align: center;
            cursor: pointer;
        }

        .zoom .plus {
            border-radius: 10px 10px 0 0;
        }

        .zoom .minus {
            border-radius: 0 0 10px 10px;
        }

        .zoom .recover {
            border-top: 1px solid rgba(226, 226, 226, .4);
            border-bottom: 1px solid rgba(226, 226, 226, .4);
        }
    </style>
</head>

<body>
<script type="text/javascript">
    let showData = {
        "color": "#ffffff",
        "imageUrl": "",
        "width": 1080,
        "json": "{\"cells\":[{\"type\":\"standard.Rectangle\",\"position\":{\"x\":385,\"y\":60},\"size\":{\"width\":230,\"height\":63},\"angle\":0,\"id\":\"f1ff0910-f33e-44db-b825-8f47fc914020\",\"z\":1,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#ff9959\",\"fill\":\"#ff9959\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":10},\"label\":{\"fill\":\"#000\",\"text\":\"XX医院就诊\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1,\"transform\":\"matrix(1,0,0,1,115,31.5)\"},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":1,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"\",\"incidentData\":\"\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":135,\"y\":225},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"d35ffdba-2a2d-44ee-887a-2ac7c169ebda\",\"z\":2,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#1a8cff\",\"fill\":\"#1a8cff\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":25},\"label\":{\"fill\":\"#000\",\"text\":\"挂号\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":2,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"\",\"incidentData\":\"\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"link\",\"source\":{\"id\":\"f1ff0910-f33e-44db-b825-8f47fc914020\"},\"target\":{\"id\":\"d35ffdba-2a2d-44ee-887a-2ac7c169ebda\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"rounded\"},\"id\":\"0bde3b4f-4c24-40ac-9308-9fe70b5a9733\",\"z\":3,\"labels\":[{\"attrs\":{\"text\":{\"text\":\"\",\"fontSize\":\"12px\",\"fill\":\"#000\",\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"}}}],\"vertices\":[{\"x\":370,\"y\":185}],\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"},\".connection\":{\"stroke\":\"#1a8cff\",\"stroke-width\":1}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":135,\"y\":309.21875},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"4d301d45-d70d-43c7-8c1c-34a02dbfed35\",\"z\":4,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#1a8cff\",\"fill\":\"#1a8cff\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":25},\"label\":{\"fill\":\"#000\",\"text\":\"分诊\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":2,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"\",\"incidentData\":\"\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"link\",\"source\":{\"id\":\"d35ffdba-2a2d-44ee-887a-2ac7c169ebda\"},\"target\":{\"id\":\"4d301d45-d70d-43c7-8c1c-34a02dbfed35\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"normal\"},\"id\":\"a1f98d09-c803-4a35-9198-6b2b7de04473\",\"z\":5,\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":135,\"y\":399.21875},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"dc9ff51d-347b-407f-9612-3aea94bacce4\",\"z\":6,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#1a8cff\",\"fill\":\"#1a8cff\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":25},\"label\":{\"fill\":\"#000\",\"text\":\"初诊\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":2,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"\",\"incidentData\":\"\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"link\",\"source\":{\"id\":\"4d301d45-d70d-43c7-8c1c-34a02dbfed35\"},\"target\":{\"id\":\"dc9ff51d-347b-407f-9612-3aea94bacce4\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"normal\"},\"id\":\"c73dafa0-48ba-4342-830a-f5182a772b06\",\"z\":7,\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":135,\"y\":484.21875},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"735926df-a624-45b2-8d5b-2bf949462111\",\"z\":8,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#1a8cff\",\"fill\":\"#1a8cff\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":25},\"label\":{\"fill\":\"#000\",\"text\":\"化验\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":2,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"\",\"incidentData\":\"\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"link\",\"source\":{\"id\":\"dc9ff51d-347b-407f-9612-3aea94bacce4\"},\"target\":{\"id\":\"735926df-a624-45b2-8d5b-2bf949462111\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"normal\"},\"id\":\"361b6ada-f4bd-4db1-9827-4df2a021b972\",\"z\":9,\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":372.5,\"y\":484.21875},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"74b91585-dec9-4b30-9861-2707c3dc4d70\",\"z\":10,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#1a8cff\",\"fill\":\"#1a8cff\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":25},\"label\":{\"fill\":\"#000\",\"text\":\"CT\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":2,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"\",\"incidentData\":\"\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"link\",\"source\":{\"id\":\"735926df-a624-45b2-8d5b-2bf949462111\"},\"target\":{\"id\":\"74b91585-dec9-4b30-9861-2707c3dc4d70\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"normal\"},\"id\":\"86f09262-5e30-4385-9bd4-bf89adfa1632\",\"z\":11,\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":372.5,\"y\":555},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"48ab9879-7a23-4a51-a142-f9897e2c0cf5\",\"z\":12,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#1a8cff\",\"fill\":\"#1a8cff\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":25},\"label\":{\"fill\":\"#000\",\"text\":\"验血\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":2,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"文本\",\"incidentData\":\"<p>测试一下弹出框</p>\",\"dialogColor\":\"rgba(198, 64, 64, 1)\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"link\",\"source\":{\"id\":\"735926df-a624-45b2-8d5b-2bf949462111\"},\"target\":{\"id\":\"48ab9879-7a23-4a51-a142-f9897e2c0cf5\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"rounded\"},\"id\":\"16208ed7-5087-4da3-ae35-5fd88979e80f\",\"z\":13,\"labels\":[{\"attrs\":{\"text\":{\"text\":\"\",\"fontSize\":\"12pxpx\",\"fill\":\"#000\",\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"}}}],\"vertices\":[{\"x\":265,\"y\":530}],\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"},\".connection\":{\"stroke\":\"#1a8cff\",\"stroke-width\":1}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":135,\"y\":616.5625},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"e3e7da92-c410-4106-a2ef-9ff716f131c7\",\"z\":14,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#1a8cff\",\"fill\":\"#1a8cff\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":25},\"label\":{\"fill\":\"#000\",\"text\":\"确诊\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":2,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"\",\"incidentData\":\"\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"link\",\"source\":{\"id\":\"735926df-a624-45b2-8d5b-2bf949462111\"},\"target\":{\"id\":\"e3e7da92-c410-4106-a2ef-9ff716f131c7\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"rounded\"},\"id\":\"1d684032-e834-47a5-9af6-fb431b63b65b\",\"z\":15,\"labels\":[{\"attrs\":{\"text\":{\"text\":\"\",\"fontSize\":\"12pxpx\",\"fill\":\"#000\",\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"}}}],\"vertices\":[{\"x\":185,\"y\":580}],\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"},\".connection\":{\"stroke\":\"#1a8cff\",\"stroke-width\":1}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":135,\"y\":709.21875},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"5043a2c1-c042-49ee-bdcb-a881ad259b56\",\"z\":16,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#1a8cff\",\"fill\":\"#1a8cff\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":25},\"label\":{\"fill\":\"#000\",\"text\":\"抓药\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":2,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"\",\"incidentData\":\"\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"link\",\"source\":{\"id\":\"e3e7da92-c410-4106-a2ef-9ff716f131c7\"},\"target\":{\"id\":\"5043a2c1-c042-49ee-bdcb-a881ad259b56\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"normal\"},\"id\":\"93957a52-bad0-4a2b-bc78-0d1203c64b49\",\"z\":17,\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":372.5,\"y\":616.5625},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"0c8f0c91-cd77-4441-a045-c82191e4000d\",\"z\":18,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#1a8cff\",\"fill\":\"#1a8cff\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":25},\"label\":{\"fill\":\"#000\",\"text\":\"住院\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":2,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"视频\",\"incidentData\":\"/ymer/action/file/showImage?filename=image/flowchart/1463712054266363905.mp4\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"link\",\"source\":{\"id\":\"e3e7da92-c410-4106-a2ef-9ff716f131c7\"},\"target\":{\"id\":\"0c8f0c91-cd77-4441-a045-c82191e4000d\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"normal\"},\"id\":\"f980033d-c87b-423e-9920-7fab18348ce1\",\"z\":19,\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":135,\"y\":809.21875},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"6dbaab39-3845-4aed-b846-a27e905d34e6\",\"z\":20,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#1a8cff\",\"fill\":\"#1a8cff\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":25},\"label\":{\"fill\":\"#000\",\"text\":\"回家\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":2,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"\",\"incidentData\":\"\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"link\",\"source\":{\"id\":\"5043a2c1-c042-49ee-bdcb-a881ad259b56\"},\"target\":{\"id\":\"6dbaab39-3845-4aed-b846-a27e905d34e6\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"normal\"},\"id\":\"cd30b023-ec49-4a34-a38a-d057d0323dae\",\"z\":21,\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"}}},{\"type\":\"link\",\"source\":{\"id\":\"0c8f0c91-cd77-4441-a045-c82191e4000d\"},\"target\":{\"id\":\"6dbaab39-3845-4aed-b846-a27e905d34e6\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"rounded\"},\"id\":\"83db2b98-dfdc-4502-90f1-722affc5eda9\",\"z\":22,\"labels\":[{\"attrs\":{\"text\":{\"text\":\"康复\",\"fontSize\":\"12px\",\"fill\":\"#000\",\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"}}}],\"vertices\":[{\"x\":415,\"y\":775}],\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"},\".connection\":{\"stroke\":\"#1a8cff\",\"stroke-width\":1}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":632.5,\"y\":616.5625},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"561e5556-642f-4f72-8843-f4ee51432bdd\",\"z\":23,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#1a8cff\",\"fill\":\"#1a8cff\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":25},\"label\":{\"fill\":\"#000\",\"text\":\"身亡\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":2,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"\",\"incidentData\":\"\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"link\",\"source\":{\"id\":\"0c8f0c91-cd77-4441-a045-c82191e4000d\"},\"target\":{\"id\":\"561e5556-642f-4f72-8843-f4ee51432bdd\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"rounded\"},\"id\":\"584e7d45-93a0-4707-8751-1e429cc8f96f\",\"z\":24,\"labels\":[{\"attrs\":{\"text\":{\"text\":\"不治\",\"fontSize\":\"12px\",\"fill\":\"#000\",\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"}}}],\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"},\".connection\":{\"stroke\":\"#1a8cff\",\"stroke-width\":1}}},{\"type\":\"standard.Rectangle\",\"position\":{\"x\":775,\"y\":885},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"bb7eb6ad-e422-421f-be97-8006cc9574d4\",\"z\":25,\"attrs\":{\"body\":{\"strokeWidth\":1,\"stroke\":\"#ff9959\",\"fill\":\"#ff9959\",\"fillOpacity\":1,\"strokeDasharray\":\"1,0\",\"rx\":10},\"label\":{\"fill\":\"#000\",\"text\":\"太平间\\u0000\",\"style\":{\"opacity\":1,\"letterSpacing\":1},\"kerning\":50,\"fontWeight\":\"Normal\",\"fontStyle\":\"Normal\",\"fontFamily\":\"SimSun\"},\"root\":{\"tabindex\":1,\"title\":\"joint.shapes.standard.Rectangle\",\"hierarchy\":0,\"incident\":\"\",\"incidentData\":\"\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}},{\"type\":\"link\",\"source\":{\"id\":\"561e5556-642f-4f72-8843-f4ee51432bdd\"},\"target\":{\"id\":\"bb7eb6ad-e422-421f-be97-8006cc9574d4\"},\"markup\":\"<path class=\\\"connection\\\" stroke-dasharray=\\\"1,0\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-source\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"marker-target\\\" fill=\\\"#1a8cff\\\" stroke=\\\"#1a8cff\\\" d=\\\"M 0 0 0 0\\\"/><path class=\\\"connection-wrap\\\" d=\\\"M 0 0 0 0\\\"/><g class=\\\"labels\\\" /><g class=\\\"marker-vertices\\\"/><g class=\\\"marker-arrowheads\\\"/><g class=\\\"link-tools\\\" />\",\"bpmnType\":\"SequenceFlow\",\"connector\":{\"name\":\"normal\"},\"id\":\"ff2d27fc-ad18-4ef8-a9e5-9641500498f6\",\"z\":26,\"attrs\":{\".marker-target\":{\"fill\":\"#1a8cff\",\"d\":\"M 10 0 L 0 5 L 10 10 z\"}}},{\"type\":\"standard.Image\",\"position\":{\"x\":675,\"y\":595},\"size\":{\"width\":95,\"height\":41.5625},\"angle\":0,\"id\":\"8f736979-5af1-4825-82c7-b2b52d739408\",\"z\":27,\"attrs\":{\"image\":{\"xlinkHref\":\"\"},\"root\":{\"tabindex\":8,\"title\":\"joint.shapes.standard.Image\",\"hierarchy\":0,\"incident\":\"图片\",\"incidentData\":\"/ymer/action/file/showImage?filename=image/flowchart/1463703959138009090.jpg\",\"dialogColor\":\"\",\"dialogWidth\":800,\"dialogHeight\":600}}}]}",
        "height": 1920
    }
</script>
<script>
    let fileUrl = "http://127.0.0.1:8089/"
</script>
<div id="app">
    <div id="browse">
        <div id="canvas"></div>
        <div class="zoom">
            <div @click="plus" class="plus">+</div>
            <div @click="recover" class="recover">〇</div>
            <div @click="minus" class="minus">-</div>
        </div>
        <!-- 视频 -->
        <el-dialog :visible.sync="openVideo" @close="handleClose">
            <video :src="videoUrl" controls="controls" height="100%" preload="none" width="100%"></video>
        </el-dialog>
        <!-- 音频 -->
        <el-dialog :visible.sync="openAudio" @close="handleClose">
            <audio :src="Audio" controls="controls" height="100%" preload="none" width="100%"></audio>
        </el-dialog>

        <!-- 图片 -->
        <el-dialog :visible.sync="openImage" @close="handleClose">

            <el-image :src="image" style="width:100%"></el-image>
        </el-dialog>
        <!-- 文本 -->
        <el-dialog :close-on-click-modal="false" :modal="false" :visible.sync="openText" @close="handleClose"
                   ref="textDialog">
            <div class="textWrap" v-html="text"></div>
        </el-dialog>
    </div>
</div>

<script src="./jquery.js"></script>
<script src="./lodash.js"></script>
<script src="./backbone.js"></script>
<script src="./joint.min.js"></script>
<script src="./vue.js"></script>
<script src="./element.js"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            graph: new joint.dia.Graph(),
            paper: new joint.dia.Paper(),
            openVideo: false,
            openAudio: false,
            openImage: false,
            openText: false,
            videoUrl: "",
            Audio: "",
            image: "",
            text: "",
            el: "",
            scaleSun: 1,
            cellViewX: 0,
            cellViewY: 0,
            originX: 0,
            originY: 0,
            one: 0,
            two: 0
        },
        mounted() {
            this.el = $("#browse");
            this.init();
            if (!this.IsPC()) {
                let W = $(window).width();
                let tw = showData.width
                this.scaleSun = W / tw
                this.paper.scale(W / tw);
            }
            $('.el-main').css('overflow', 'auto')
        },
        methods: {
            init() {
                let data = showData;
                this.graph = new joint.dia.Graph();
                this.paper = new joint.dia.Paper({
                    el: $("#canvas"),
                    width: data.width,
                    height: data.height,
                    gridSize: 1,
                    background: {
                        color: data.color,
                        image: data.imageUrl,
                        size: {
                            width: data.width,
                            height: data.height,
                        },
                    },
                    model: this.graph,
                    interactive: false,
                    async: true,
                    linkPinning: false, // 连线必须连到某个元素，即不允许连到空白处
                    snapLinks: {
                        radius: 25, // 距离元素连接点25像素时自动连接上
                    },
                    defaultRouter: {
                        name: "orthogonal",
                    },
                    perpendicularLinks: true,
                    restrictTranslate: true, //设定元素不能拖出画布
                });
                this.paper.on({
                    // 点击元素事件
                    "cell:pointerdown": (cellView, evt, x, y) => {
                        var cell = cellView.model;
                        if (cell.get("attrs").root.incident == "视频") {
                            this.openVideo = true;
                            this.videoUrl = this.setUrl(cell.get("attrs").root.incidentData);
                        }
                        if (cell.get("attrs").root.incident == "音频") {
                            this.openAudio = true;
                            this.Audio = this.setUrl(cell.get("attrs").root.incidentData);
                        }
                        if (cell.get("attrs").root.incident == "图片") {
                            this.openImage = true;
                            this.image = this.setUrl(cell.get("attrs").root.incidentData);
                        }
                        if (cell.get("attrs").root.incident == "文本") {
                            this.openText = true;
                            this.text = cell.get("attrs").root.incidentData;
                            let dialogWidth = cell.get("attrs").root.dialogWidth;
                            let dialogHeight = cell.get("attrs").root.dialogHeight;
                            let dialogColor = cell.get("attrs").root.dialogColor;
                            this.openText = true;
                        }
                    },
                    "blank:pointerdown": (cellView) => {
                        this.cellViewX = $('#browse').scrollTop()
                        this.cellViewY = $('#browse').scrollLeft()
                        this.originX = cellView.pageX
                        this.originY = cellView.pageY
                    },
                    "blank:pointermove": (cellView) => {
                        let x = cellView.pageX
                        let y = cellView.pageY
                        let newX = x - this.originX + this.cellViewX
                        let newY = y - this.originY + this.cellViewY
                        $('#browse').scrollLeft(newX)
                        $('#browse').scrollTop(newY)

                    }
                });
                this.graph.fromJSON(JSON.parse(data.json));
            },
            // 判断端
            IsPC() {
                var userAgentInfo = navigator.userAgent;
                var Agents = [
                    "Android",
                    "iPhone",
                    "SymbianOS",
                    "Windows Phone",
                    "iPad",
                    "iPod",
                ];
                var flag = true;
                for (var v = 0; v < Agents.length; v++) {
                    if (userAgentInfo.indexOf(Agents[v]) > 0) {
                        flag = false;
                        break;
                    }
                }
                return flag;
            },
            handleClose() {
                this.videoUrl = "";
                this.Audio = "";
                this.image = "";
                this.text = "";
            },
            // 放大缩小
            plus() {
                this.scaleSun += 0.1
                if (this.scaleSun <= 1) {
                    this.paper.scale(this.scaleSun);
                } else {
                    this.scaleSun = 1
                    this.$message('已经最大了');
                }
            },
            minus() {
                this.scaleSun -= 0.1
                if (this.scaleSun >= 0.1) {
                    this.paper.scale(this.scaleSun);
                } else {
                    this.scaleSun = 0.1
                    this.$message('已经最小了');
                }

            },
            recover() {
                this.scaleSun = 1
                this.paper.scale(this.scaleSun);
            },
            // 添加host
            setUrl(data) {
                return fileUrl + data;
            }
        },
    })
</script>
</body>

</html>